<template>
  <div class="box">
    <!--文本操作-->
    <el-form ref="form" label-width="100px" style="width: 90%">
      <el-form-item label="图层名：">
        <el-input size="mini" v-model="chooseComponent.layerName"></el-input>
      </el-form-item>
      <el-form-item label="文本内容：">
        <el-input size="mini" v-model="chooseComponent.option.text"></el-input>
      </el-form-item>
      <el-form-item label="字体大小：">
        <el-input-number size="mini" v-model="chooseComponent.option.fontSize" controls-position="right" :min="12"
                         :precision="0"></el-input-number>
      </el-form-item>
      <el-form-item label="字体颜色：">
        <avue-input-color v-model="chooseComponent.option.color"></avue-input-color>
      </el-form-item>
      <el-form-item label="字体背景色：">
        <avue-input-color v-model="chooseComponent.option.backgroundColor"></avue-input-color>
      </el-form-item>
      <el-form-item label="字体间距：">
        <el-slider :min="0" v-model="chooseComponent.option.letterSpacing"></el-slider>
      </el-form-item>
      <el-form-item label="字体行高：">
        <el-slider :min="0" v-model="chooseComponent.option.lineHeight"></el-slider>
      </el-form-item>
      <el-form-item label="对齐方式：">
        <el-select size="mini" v-model="chooseComponent.option.textAlign" placeholder="请选择">
          <el-option key="left" label="左对齐" value="left"></el-option>
          <el-option key="center" label="居中" value="center"></el-option>
          <el-option key="right" label="右对齐" value="right"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="文字粗细：">
        <el-select size="mini" v-model="chooseComponent.option.fontWeight" placeholder="请选择">
          <el-option key="normal" label="正常" value="normal"></el-option>
          <el-option key="bold" label="加粗" value="bold"></el-option>
          <el-option key="lighter" label="细小" value="lighter"></el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <el-collapse>
      <el-collapse-item title="跑马灯设置" name="1">
        <el-form ref="form" label-width="100px" style="width: 90%">
          <el-form-item label="开启：">
            <el-switch
              v-model="chooseComponent.option.move">
            </el-switch>
          </el-form-item>
          <el-form-item label="滚动速度：">
            <el-slider :min="1" :max="50" v-model="chooseComponent.option.speed"></el-slider>
          </el-form-item>
        </el-form>
      </el-collapse-item>
      <el-collapse-item title="超链接设置" name="2">
        <el-form ref="form" label-width="100px" style="width: 90%">
          <el-form-item label="开启：">
            <el-switch
              v-model="chooseComponent.option.jump">
            </el-switch>
          </el-form-item>
          <el-form-item label="跳转方式：">
            <el-radio-group v-model="chooseComponent.option.jumpType">
              <el-radio label="local">本窗口</el-radio>
              <el-radio label="open">新窗口</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="跳转地址：">
            <el-input size="mini" v-model="chooseComponent.option.jumpUrl"></el-input>
          </el-form-item>
        </el-form>
      </el-collapse-item>
    </el-collapse>

  </div>
</template>

<script>
    export default {
        name: "op_text",
        computed: {
            //当前选中的值
            chooseComponent() {
                return this.$store.state.chooseComponent
            },
        },
    }
</script>

<style scoped lang="scss">
  .box {
    width: 100%;
    flex: 1;
    color: white;

    ::v-deep .el-form-item__label {
      color: white;
    }

    ::v-deep .el-collapse-item__header {
      background-color: #545c64;
      color: white;
    }

    ::v-deep .el-collapse-item__content {
      background-color: #545c64;
      color: white;
    }
    ::v-deep .el-radio__label{
      color: white;
    }
  }
</style>
